/**
 * 文章详情页面
 */
import React from 'React';
import { getNewByUuid } from '../../services/news';
import { useNavigate } from 'react-router-dom';
import { useParams } from '../../hooks/useParams';
import { IArticleDataSource } from '../../interface/common';
import './index.less';


const ArticleDetail: React.FC = () => {
  // 从 param 中获取 uuid
  const { uuid } = useParams();
  const navigate = useNavigate();
  const [dataSource, setDataSource] = React.useState<IArticleDataSource | undefined>();
  const [lastId, setLastId] = React.useState<string | undefined>(undefined);
  const [nextId, setNextId] = React.useState<string | undefined>(undefined);

  React.useEffect(() => {
    uuid && getNewByUuid(uuid).then(res => {
      const resData = res.data;
      const { data, last, next } = resData;
      data && setDataSource(data);
      setLastId(last ? last.uuid : undefined);
      setNextId(next ? next.uuid : undefined);
    });
  }, [uuid]);

  return dataSource ? (
    <div className="article-detail-container">
      <div className="article-detial-page-header">
        <a onClick={() => { navigate(-1); }}> <span>{'< 返回'}</span></a>
      </div>
      <div className='article-detail-body'>
        <div className="article-detail-image">
          <img src={dataSource.imgUrl}></img>
        </div>
        <div className="article-detail-title">{dataSource.title}</div>
        <div className="article-detail-content" dangerouslySetInnerHTML={{ __html: dataSource.content }} />
      </div>
      <div className="article-detail-footer">
        {lastId && <span id='last-button'><a href={`/#/news/detail?uuid=${lastId}`}>{`< 上一篇`}</a></span>}
        {nextId && <span id='next-button'><a href={`/#/news/detail?uuid=${nextId}`}>{`下一篇 >`}</a></span>}
      </div>
    </div>
  ) : null;
}

export default ArticleDetail;

